<template>
  <div class="consultant-admin-page">
    <!-- 咨询师管理页面头部 -->
      <div class="consultant-page-head">
        <div class="top">
            <van-image round fit="cover" :src="consultantData.avatar"  />
            <div class="name">
                <p>{{consultantData.name}}</p>
                <p><van-icon name="edit"/>编辑个人信息</p>
            </div>
        </div>
      </div>
      <!-- 咨询师功能 -->
      <div class="consultant-page-content">
        <div class="head">
            <h3>功能管理</h3>
            <router-link to="">更多功能 <van-icon name="arrow" /></router-link>
          </div>
          <van-row>
            <van-col span="8">
              <router-link class="admin-link" to="/articlePublish">
                  <van-badge >
                      <gh-icon name="user-wenzhanguanli" />
                    </van-badge>
                    <p>文章发布</p>
                </router-link>
            </van-col>
            <van-col span="8">
              <router-link class="admin-link" to="/consultantRoomList">
                  <van-badge >
                      <gh-icon name="user-liaotianshi" />
                    </van-badge>
                    <p>聊天室</p>
                </router-link>
            </van-col>
            <van-col span="8">
              <router-link class="admin-link" to="/scheduling">
                  <van-badge >
                      <gh-icon name="user-yuyueshezhi" />
                    </van-badge>
                    <p>预约设置与排期</p>
                </router-link>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="8">
                <router-link class="admin-link" to="/appointmentHistory">
                    <van-badge >
                        <gh-icon name="user-yuyuejilu" />
                      </van-badge>
                      <p>用户预约记录</p>
                  </router-link>
              </van-col>
              <van-col span="8">
                <router-link class="admin-link" to="/cancelAppointment">
                    <van-badge >
                        <gh-icon name="user-hexiao" />
                      </van-badge>
                      <p>核销预约</p>
                  </router-link>
              </van-col>
              <van-col span="8">
                <router-link class="admin-link" :to="`/detailConsultant/${consultantData.id}`">
                    <van-badge >
                        <gh-icon name="user-yulang" />
                      </van-badge>
                      <p>预览预约界面</p>
                  </router-link>
              </van-col>
          </van-row>
      </div>
      <!-- 工具栏 -->
      <div class="consultant-page-group">
        <van-cell
        v-for="(item, i) in tools"
          :key="i"
          :title="item.label"
          :to="item.path"
          is-link
          :border="false" >
          <template #icon><gh-icon  :name="`user-tool-0${4 + i}`" /></template>
        </van-cell>
      </div>
      <van-button class="layout" native-type="submit" @click="layout" block round type="primary">
        退出登录
      </van-button>
  </div>

</template>

<script setup>
import {ref,reactive,onBeforeMount,computed,onMounted,watch,onBeforeUnmount} from "vue"
import { Toast, Dialog } from 'vant'
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router'
import {useUserStore}from '@/stores'
import{getconsultantInfoByaccount}from '@/services/consultant'
const route =useRoute()
const router =useRouter();  
const store = useUserStore()

//定义咨询师照片响应式图片
const consultantData=ref('')

onMounted(async()=>{
    const account=JSON.parse(localStorage.getItem('gh-user')).user.userData.account
    const res=await getconsultantInfoByaccount(account)
    consultantData.value=res.data
})

// tools数据
const tools = [
  { label: '返回用户端', path: '/user' },
  { label: '编辑个人名片', path: '/editConsultantInfo' },
  { label: '更多设置', path: '' }
]

//退出登录
const layout=async()=>{
    await Dialog.confirm({
    title: '温馨提示',
    message: '您确认退出登录吗？'
  })
   .then(() => {
    store.delUser()
    localStorage.removeItem('tokenStr')
    router.push('/login')
    Toast.success('您已退出登录')
  })
  .catch(() => {
    Toast('取消操作')
  });
}


</script>

<style lang="scss" scoped>
.consultant-admin-page{
    background-color: var(--gh-bg);
           min-height: calc(100vh - 50px);
           width: 100%;
           padding: 0 15px 10px;
           .consultant-page-head{
               height: 110px;
               background: linear-gradient(180deg, rgba(55, 247, 157, 0.46), rgba(44, 181, 165, 0));
              margin: 0 -15px;
              padding: 0 20px;
              .top{
                display: flex;
                padding-top: 25px;
                align-items: center;
                .van-image{
                    width: 70px;
                    height: 70px;
                }
                .name{
                    padding-left: 10px;
                    p{
                        &:first-child{
                            font-size: 18px;
                            font-weight: 500;
                        }
                        &:last-child{
                            margin-top: 10px;
                            color: var(--gh-primary);
                            font-size: 16px;
                        }
                    }
                }
              }
           }
           .consultant-page-content{
              background: #fff;
              border-radius: 10px;
              margin-bottom: 15px;
              padding-bottom: 10px;
              width: 100%;
              .head{
                display: flex;
                justify-content: space-between;
                line-height: 50px;
                padding: 0 15px;
                a{
                    color:var(--gh-tip)
                }
               }
               .van-col{
                text-align: center;
                .gh-icon{
                    font-size: 28px;
                }
                p{
                    font-size: 12px;
                    padding-top: 4px;
                }
               }
           }
           .consultant-page-group{
               background-color: #fff;
                border-radius: 8px;
                 overflow: hidden;
                .van-cell{
                   align-items: center;
                }
               .gh-icon{
                  font-size: 17px;
                  margin-right: 10px;
                }
            }
            .layout{
            margin-top: 40px;
            width: 50%;
            left: 50%;
            font-family: '宋体';
            height: 35px;
            transform: translate(-50% );
          }

}
</style>
